<template>

    <el-container>

        <el-header>
            <el-row class="block-col-2">
                <el-col :span="12">
                    <el-select @change="siteChange" v-model="curSiteId" filterable placeholder="请选择站点">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="12">
                    <el-date-picker @change="dateChange"  v-model="s_date"  type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-col>
            </el-row>

        </el-header>
        <el-container style="min-height: 300px">
            <el-main>
                <div id="chart1" style="min-height: 400px"></div><!--手机品牌-->
            </el-main>
        </el-container>

        <el-container style="min-height: 300px">
            <el-main style="padding: 0px;">

                <el-tag type="info" class="zhibiao"> <Icon type="android-arrow-dropdown" size="20"></Icon> 与平台手机型号分布差异较大的站TOP10</el-tag>
                <el-table
                        v-loading="loading"
                        stripe
                        :data="tableData"
                        style="width:100%"
                        size="small"
                >

                    <el-table-column label="序号" type="index"  width="50"></el-table-column>

                    <el-table-column prop="host" label="网站域名" ></el-table-column>
                    <el-table-column prop="views" label="浏览数"></el-table-column>
                    <el-table-column prop="rate" label="差异度"></el-table-column>

                </el-table>


            </el-main>
        </el-container>


    </el-container>

</template>


<script>
    import Cookies from 'js-cookie';
    export default {
        name: 'phoneBrand',
        data () {
            return {
                options: [],//网站列表切换
                userid:'',
                curSiteId:'',
                s_date:'',
                //表格当前页数据
                tableData: [],
                brandList:[{value:25, name:'苹果'},
                    {value:30, name:'小米'},
                    {value:12, name:'华为'},{value:30, name:'小米2'},
                    {value:12, name:'华为3'}],
                legendName:['苹果','小米','华为','小米2','华为3'],
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            dateChange:function () {
                //alert(this.s_date+'日期选择完后');
                this.getDatas();
                this.loadDatas();
            },
            siteChange:function () {
                this.getDatas();
                this.loadDatas();
            },
            getDatas(){
                //后台请求数据
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",this.curSiteId);
                params.append("date",this.s_date);
                this.$axios.post('brand/getPhoneBrandData',params).then((res)=> {
                    this.brandList=[];
                    this.legendName=[];
                    let blist=res.data.brandList;
                    this.brandList=blist;

                    for(let i=0;i<blist.length;i++){
                        this.legendName.push(blist[i].name);
                    }

                    let myChart1 = this.$echarts.init(document.getElementById('chart1'));
                    //手机品牌饼图

                   let option = {
                        title : {
                            text: '平台手机型号分析情况',
                            textStyle: {
                                fontWeight: 'normal',
                                color: '#27727B'          // 主标题文字颜色
                            }
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            x : 'left',
                            y : 'bottom',
                            data:this.legendName
                        },

                        calculable : true,
                        series : [
                            {
                                name:'手机品牌',
                                type:'pie',
                                radius : [20, 150],
                                center : ['45%', 200],
                                roseType : 'radius',
                                width: '40%',       // for funnel
                                max: 40,            // for funnel
                                itemStyle : {
                                    normal : {
                                        label : {
                                            show : true
                                        },
                                        labelLine : {
                                            show : true
                                        }
                                    }
                                },
                                data:this.brandList
                            }
                        ]
                    };

                    myChart1.setOption(option);


                }).catch((error)=> {
                    console.log(error);
                });
            },
            loadDatas(){
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                params.append("siteid",this.curSiteId);
                params.append("date",this.s_date);
                this.$axios.post('brand/getTableData',params).then((res)=> {
                    this.tableData = res.data.diffList;

                }).catch((error)=> {
                    console.log(error);
                });
            },
            getSiteList:function () {
                let params =new URLSearchParams();
                params.append("userid",this.userid);
                this.$axios.post('/site/getSiteList',params).then((res)=> {
                    let list = res.data.list;
                    for(let i=0;i<list.length;i++){
                        this.options.push({"value":list[i].id,"label":list[i].siteName+"-"+list[i].siteHome});
                    }
                    if(list.length>0){
                        this.curSiteId=list[0].id;
                    }

                });

            },
        },
        mounted(){
            let userid = Cookies.get('xbsj_userid');
            this.userid = userid;

            //加载站点列表
            this.getSiteList();

            //初始化数据
            this.getDatas();
            this.loadDatas();


        }
    }



    function  getxInterval(x_num) {
        if(x_num < 40 && x_num >= 30){
            return 2;
        }else if(x_num <60 && x_num >= 40){
            return 3;
        }else if(x_num <80 && x_num >= 60){
            return 4;
        }else if(x_num <100 && x_num >= 80){
            return 5;
        }else if(x_num <120 && x_num >= 100){
            return 6;
        }else if(x_num <140 && x_num >= 120){
            return 7;
        }else if(x_num <160 && x_num >= 140){
            return 8;
        }else if(x_num <180 && x_num >= 160){
            return 9;
        }else if(x_num <200 && x_num >= 180){
            return 10;
        }else if(x_num <220 && x_num >= 200){
            return 11;
        }else if(x_num <240 && x_num >= 220){
            return 12;
        }else if(x_num >= 240){
            return 15;
        }else{
            return 0;
        }
    }
</script>

<style>
    .zhibiao{
        width: 100%;
        border-radius: 0px;
        border-bottom: 0px;
        font-size: 14px;
        color: #666;
        font-weight: bold;
        padding-left: 10px;
        padding-bottom: 35px;
        padding-top: 6px;
        background: #f9f9f9;
        border-color: #f9f9f9;
        margin-top: 50px;
    }

</style>